<template>
  <div>
    文章页面<br/><br/>
    <!-- 条件查询表单 -->
    <div>
      <el-form :inline="true" :model="openotice" class="demo-form-inline">
        <!-- 功能按钮 -->
        <el-form-item style="float: left">
          <el-button type="primary" @click="toOpenoticeAddPage">新增</el-button>
        </el-form-item>

        <!-- 查询条件 -->
        <el-form-item label="文章标题">
          <el-input v-model="openotice.ntitle" placeholder="请输入公告标题" widht="20px"></el-input>
        </el-form-item>
        <el-form-item label="话题专栏">
          <el-select v-model="openotice.topic" placeholder="请选择话题" style="width:150px">
            <el-option label="不限" value=""></el-option>
            <el-option label="健康膳食" value="健康膳食"></el-option>
            <el-option label="锻炼运动" value="锻炼运动"></el-option>
            <el-option label="预防疾病" value="预防疾病"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="发布状态">
          <el-select v-model="openotice.nstate" placeholder="请选择发布状态" style="width:150px">
            <el-option label="不限" value=""></el-option>
            <el-option label="草稿" value="草稿"></el-option>
            <el-option label="已发布" value="已发布"></el-option>
          </el-select>
        </el-form-item>
        <!-- 查询按钮 -->
        <el-form-item >
          <el-button type="primary" @click="getAllOpenoticeButton">查询</el-button>
          <el-button type="primary"  @click="reset">重置</el-button>
        </el-form-item>
      </el-form>
    </div>

    <!-- 数据展示 -->
    <div>
        <el-table :data="pageBean.beanList" style="width: 100%" >
            <el-table-column fixed type="index"  width="60" />
            <el-table-column prop="noticenum" label="文章编号" width="170" />
            <el-table-column prop="ntitle" label="文章标题" width="120" />
            <!-- :show-overflow-tooltip='true内容过多隐藏 -->
            <el-table-column prop="ncontent" label="文章内容" width="300" :show-overflow-tooltip='true'/>
            <el-table-column prop="topic" label="话题专栏" width="120" />
            <el-table-column prop="nstate" label="发布状态" width="100" />
            <el-table-column prop="nissuer" label="发布人" width="80" />
            <el-table-column prop="createdate" label="创建时间" width="170" />
            <el-table-column fixed="right" label="操作" min-width="120">
            <template #default="scope">
                <el-button size="mini" type="text" icon="el-icon-edit" @click="handleEdit(scope.$index,scope.row)">编辑</el-button>
                <el-button link type="primary" size="small" @click.prevent="deleteRow(scope.$index,scope.row)">删除</el-button>
            </template>
            </el-table-column>
        </el-table>
    </div>

    <!-- 分页控件 -->
    <div class="block">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageIndex"
        :page-sizes="[1, 3, 5]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pageBean.totalRecord">
      </el-pagination>
    </div>
  </div>
</template>

<script>

export default {
  data() {
    return {
      
      dialogFormTitle:"",
      sample: {},
      pageBean: [],
      pageIndex: 1,
      pageSize: 5,
      openotice: {},
      dialogFormVisible: false,
      openoticeModify:{}
      //pages: ""
    };
  },
  mounted() {
    this.getAllOpenotice();
  },
  
  methods: {
    //编辑功能的页面跳转
    handleEdit(index, row) {
        if (row.nstate === '已发布') {
        alert('该文章已发布，不能进行编辑！');
      } else {
      console.log(index, row);
      this.$router.push("/opeNoticeModify/" + row.nid);
      }
    },

    //删除操作
    deleteRow(index, row) {
      this.$confirm("此操作将永久删除该供应商, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
      .then(() => {
            this.$axios.post("notice/"+ row.nid).then((resp) => {
              if (resp.data.code == 200) {
                this.$message({
                type: "success",
                message: "删除成功!",
              });
                //起到刷新页面的作用
                this.getAllOpenotice();
              }
            });
      })
      .catch(() => {
        this.$message({
          type: "info",
          message: "已取消删除",
        });
      });
    },

    toOpenoticeAddPage() {
      this.$router.push("/OpeNoticeAdd");
    },

    //条件查询操作
    getAllOpenoticeButton() {
      this.pageIndex = 1;
      this.pageSize = 5;
      this.getAllOpenotice();
    },

    //重置按钮
    reset() {
      this.openotice = {};
      this.getAllOpenotice();
    },      

    //查询所有公告
    getAllOpenotice() {
      this.$axios
        .post(
          "notice/" + this.pageIndex + "/" + this.pageSize,this.openotice)
        .then((resp) => {
          if(resp.data.code==200){
            this.pageBean = resp.data.data;
          }
        });
    },

    //每页显示几条数据
    handleSizeChange(val) {
      this.pageSize = val;
      this.getAllOpenotice();
    },

    //显示第几页
    handleCurrentChange(val) {
      this.pageIndex = val;
      this.getAllOpenotice();
    },
  },
};
</script>

<style>
</style>